<template>
  <view>
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">服务登记</block>
    </cu-custom>
    <view class="cu-modal" :class="modalName == 'DialogModal2' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">温馨提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="">
          <view class="">
            <view class="radius shadow shadow-lg bg-white det_topsss">
              <view class="detail-left detail-inner" style="padding: 0 30rpx">
                服务项目与服务对象不匹配，请确认以后再提交
              </view>
            </view>
          </view>
        </view>
        <view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
          <view class="action">
            <button
              class="cu-btn line-blue text-green"
              @tap="hideModal('DialogModal2')"
            >
              我知道了
            </button>
            <!-- <button class="cu-btn bg-blue margin-left" @tap="hideModal">提交</button> -->
          </view>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="modalName == 'DialogModal1' ? 'show' : ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">确认登记</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="">
          <view class="">
            <view class="radius shadow shadow-lg bg-white det_topsss">
              <view class="detail-right detail-inner det_topsss_right">
                <view style="margin-right: 30rpx">服务对象</view>
                <view class="detail-content">
                  {{ showItem.preName }}:{{ showItem.name }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="cu-bar bg-white justify-end" style="padding: 30rpx 0">
          <view class="action">
            <button
              class="cu-btn line-blue text-green"
              @tap="hideModal('DialogModal1')"
            >
              取消
            </button>
            <button class="cu-btn bg-blue margin-left" @tap="realSubmit(item)">
              提交
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="padding-sm" @click="content(item)">
      <view class="radius shadow padding-sm shadow-lg bg-white det_top">
        <view class="detail">
          <view class="detail-img">
            <image src="../../../static/img/basics/u129.png" mode=""></image>
          </view>
          <view class="detail-right">
            <text class="left">{{ item.oldBaseName }}</text>
            <text class="right">{{ item.age }}岁</text>
          </view>
        </view>
        <view class="service">
          <view class="left">服务项目:</view>
          <view class="right">
            <text v-for="(item, index) in data" :key="index">
              <text v-if="index != data.length - 1">
                {{ item.serviceItemName }},
              </text>
              <text v-else>
                {{ item.serviceItemName }}
              </text>
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务 -->
    <view class="padding-sm">
      <view class="radius shadow padding-sm shadow-lg bg-white det_top">
        <view v-if="dataList.length != 0">
          <view v-for="(item, index) in dataList" :key="index">
            <view style="font-size: 34rpx; color: #333333">
              {{ item.serviceItemName }}
            </view>
            <!-- 复选框 -->
            <view class="goods" v-if="item.useItem">
              <label @click="changeValue(index,item)">
                <checkbox
                  style="transform: scale(0.7)"
                  class="blue"
                  :class="item.checked ? 'checked' : ''"
                  :checked="item.checked"
                /><text>需要使用物品</text>
              </label>
              <block v-if="item.checked">
                <input
                  placeholder="物品名称"
                  class="left"
                  v-model="item.useItem"
                  type="text"
                />
                <input
                  placeholder="数量"
                  class="right"
                  v-model="item.useNum"
                  type="number"
                  v-if="item.useNum != undefined"
                />
                <input
                  placeholder="数量"
                  class="right"
                  v-model="item.useNum"
                  type="number"
                  v-if="item.useNum == undefined"
                />
                <text>件</text>
              </block>
            </view>
			<!-- 单选多选 -->
            <view
              v-if="item.customItem.length != 0"
              v-for="(it, indexs) in item.customItem"
              :key="indexs"
            >
			  <view class="assist" v-if="it.classify == '单选'">
                <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
                <radio-group name="" class="inner-right">
                  <view
                    class="right"
                    v-for="(radio, radioIndex) in it.option"
                    :key="radioIndex"
                  >
                    <label>
                      <radio
                        style="transform: scale(0.7)"
                        v-model="it.value"
                        :checked="it.value == radio ? true : false"
                      /><text @click="readName(radio)">{{ radio }}</text>
                    </label>
                  </view>
                </radio-group>
              </view>
              <view class="assist" v-if="it.classify == '多选'">
                <view class="inner" @click="readName(it.title)">{{ it.title }}：</view>
                <view
                  class="right"
                  v-for="(radio, radioIndex) in it.value"
                  :key="radioIndex"
                >
                  <label @click="radio.checked = !radio.checked" class="inner-right">
                    <checkbox
                      class="blue"
                      style="transform: scale(0.7)"
                      :class="radio.checked ? 'checked' : ''"
                      :checked="radio.checked ? true : false"
                      v-model="radio.value"
                    /><text @click="readName(radio.label)">{{ radio.label }}</text>
                  </label>
                </view>
              </view>
              <view
                class="textarea"
                v-if="it.classify == '文字输入'"
                style="display: flex"
              >
                <view class="inner"  @click="readName(it.title)">{{ it.title }}：</view>
                <textarea v-model="it.value" placeholder="请输入文字" class="textarea-inner"/>
              </view>
            </view>
            <!-- 备注 -->
            <view class="padding">
              <view
                class="radius  padding-sm  bg-white det_top notes_outer"
              >
                <view class="left" @click="bremark(1)"> 登记备注: </view>
                <view class="notes">
                  <input
                    type="text"
                    v-model="item.recordRemark"
                    placeholder="请输入服务登记备注内容"
                    placeholder-style="font-size:28rpx"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="success">
      <view class="success-left">
        <image src="../../../static/img/u35.png" mode=""></image>
      </view>
      <view class="success-right" @click="getBottom">
        您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {},//上页面传递的对象
      data: [],//上页面传递的数组
      idList: [], //id数组
      dataList: [], //后台获取的服务对象的集合
      serviceTarget: 0, //0是老人的标志
      modalName: "", //弹框的名字
      showItem: {}, //后台返回的弹框对象
      cycle: "", //上各頁面的時間週期
      timeRange: "", //時間
    };
  },
  computed: {
  },
  onShow() {
   
  },
  onHide() {
    
  },
  onReady() {},
  onLoad(options) {
    this.item = JSON.parse(options.item);
	console.log(this.item)
    this.timeRange = options.timeRange;
	console.log(this.timeRange,'timeRange')
	
    this.data = JSON.parse(options.data);
    this.cycle = options.cycle;
    for (let item of this.data) {
      this.idList.push(item.serviceItemId);
    }
    console.log(this.item);
    this.getContent();

    const that = this;
    uni.$on("NFC_READ", function (msg) {
      that.readCard(msg.rfid);
    });
  },
  onUnload() {
    // 移除监听事件
    uni.$off("NFC_READ")
  },
  methods: {
	  readName(name){
	  		  if(this.$store.state.state&&this.$store.state.isphone){
	  		  	getApp().globalData.TTSSpeaker.stop();
	  		  	getApp().globalData.TTSSpeaker.speak(name,1);
	  		  }	
	  },
	  getBottom(){
		  if(this.$store.state.state&&this.$store.state.isphone){
		  	getApp().globalData.TTSSpeaker.stop();
		  	getApp().globalData.TTSSpeaker.speak(' 您可以将手机背面的NFC的扫描区域靠近位于区域的识别卡完成服务登记操作',1);
		  }	
	  },
	  content(item){
		  let items = ''
		  for(let item of this.data){
			  items += item.serviceItemName 
		  }
		  if(this.$store.state.state&&this.$store.state.isphone){
		  	getApp().globalData.TTSSpeaker.stop();
		  	getApp().globalData.TTSSpeaker.speak('您好，您目前进入服务登记页面，服务对象为：长者姓名'+item.oldManName+'年龄'+item.age+'服务项目'+items+'。马上进行服务登记操作吧',1);
		  }	
	  },
	  bremark(){
		  if(this.$store.state.state&&this.$store.state.isphone){
		  	getApp().globalData.TTSSpeaker.stop();
		  	getApp().globalData.TTSSpeaker.speak('登记备注',1);
		  }	
	  },
	  // 。
    // 获取内容
    readCard(id) {
      this.$http(
        "/implement-service/implement/getByRfidCardIdForService",
        "get",
        {
          rfidCardId: id,
        }
      ).then((res) => {
        console.log(res, "88888");
        if (res.data.code == 200) {
       
          let data = res.data.data;
          if (data == undefined) {
            uni.showToast({
              icon: "none",
              title: "这是个空标签",
            });
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('这是个空标签',1);
			}
          } else if (
            data.serviceTarget == this.serviceTarget &&
            this.item.oldBaseId == data.serviceObject.id
          ) {
            this.showItem = res.data.data.serviceObject;
            // this.showModal("DialogModal1");
            this.item.areaSiteId = res.data.data.serviceObject.id;
			this.realSubmit(this.item);
          } else {
			   // 服务项目与服务对象不匹配
			   uni.showToast({
			       title: '服务项目与服务对象不匹配',
					icon:'none',
			       duration: 1500,
			   });
			   if(this.$store.state.state&&this.$store.state.isphone){
			   	getApp().globalData.TTSSpeaker.stop();
			   	getApp().globalData.TTSSpeaker.speak('服务项目与服务对象不匹配',1);
			   }
            // this.showModal("DialogModal2");
          }
        }
      });
    },

    // POST /serviceItem/getContent
    // app获取服务项目详内容
    getContent() {
      let param = {};
      param.idList = this.idList;
      this.$http("/care-service/serviceItem/getContent", "post", param).then(
        (res) => {
          if (res.data.code == 200) {
            let dataList = res.data.data;
            for (let item of dataList) {
              item.customItem = JSON.parse(item.customItem);
              item.recordRemark = "";
              item.checked = true;
            }
            this.dataList = dataList;
          }
        }
      );
    },
    changeValue(index,item) {
		if(this.$store.state.state&&this.$store.state.isphone){
			getApp().globalData.TTSSpeaker.stop();
			getApp().globalData.TTSSpeaker.speak('需要使用物品',1);
		}	
      this.dataList[index].checked = !this.dataList[index].checked;
      if (!this.dataList[index].checked) {
        this.dataList[index].useNum = "";
        this.dataList[index].useItem = "";
      }
    },
    realSubmit(item) {
      var _that = this;
      let oldServiceRecordQueryList = [];
      let list = this.dataList;
      if (this.cycle == 0) {
        for (let item of list) {
          item.customItem = item.customItem;
          item.employeeId = uni.getStorageSync("employeeId");
          item.oldBaseId = _that.item.oldBaseId;
          item.recordRemark = item.recordRemark;
          item.serviceCycle = 0;
          item.teamId = uni.getStorageSync("teamId");
          item.timeRange = "2222";
          item.useItem = item.useItem;
          item.useNum = item.useNum;
          item.serviceItemId = item.id;
        }
      } else if (this.cycle == 1) {
        for (let item of list) {
          item.customItem = item.customItem;
          item.employeeId = uni.getStorageSync("employeeId");
          item.oldBaseId = _that.item.oldBaseId;
          item.recordRemark = item.recordRemark;
          item.serviceCycle = 1;
          item.teamId = uni.getStorageSync("teamId");
          item.timeRange = this.timeRange;
          item.useItem = item.useItem;
          item.useNum = item.useNum;
          item.serviceItemId = item.id;
        }
      } else if (this.cycle == 2) {
        for (let item of list) {
          item.customItem = item.customItem;
          item.employeeId = uni.getStorageSync("employeeId");
          item.oldBaseId = _that.item.oldBaseId;
          item.recordRemark = item.recordRemark;
          item.serviceCycle = 2;
          item.teamId = uni.getStorageSync("teamId");
          item.timeRange = this.timeRange;
          item.useItem = item.useItem;
          item.useNum = item.useNum;
          item.serviceItemId = item.id;
        }
      } else if (this.cycle == 3) {
        for (let item of list) {
          item.customItem = item.customItem;
          item.employeeId = uni.getStorageSync("employeeId");
          item.oldBaseId = _that.item.oldBaseId;
          item.recordRemark = item.recordRemark;
          item.serviceCycle = 3;
          item.teamId = uni.getStorageSync("teamId");
          item.timeRange = this.timeRange;
          item.useItem = item.useItem;
          item.useNum = item.useNum;
          item.serviceItemId = item.id;
        }
      }

      oldServiceRecordQueryList = list;
      let params = {
        oldServiceRecordQueryList: oldServiceRecordQueryList,
      };
      params = JSON.stringify(params);
      this.$http("/care-service/oldServiceRecord/save", "post", params).then(
        (res) => {
          if (res.data.code == 200) {
            // this.hideModal("DialogModal1");
			let items = ''
			for(let item of this.data){
				items += item.serviceItemName 
			}
			if(this.$store.state.state&&this.$store.state.isphone){
				getApp().globalData.TTSSpeaker.stop();
				getApp().globalData.TTSSpeaker.speak('刷卡提交成功',1);
			}
			uni.showToast({
			    title: '刷卡提交成功',
				icon:'none',
			    duration: 1500,
			});
			setTimeout(function(){
				uni.switchTab({
				    url: '/pages/basics/index'
				});
			},1500)
          }
        }
      );
    },

    showModal(item) {
      this.modalName = item;
    },
    hideModal(e) {
      this.modalName = null;
    },
  },
};
</script>

<style scoped lang="scss">
.goods {
  display: flex;
  margin-top: 20rpx;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 100rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.success {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  .success-left {
    margin-right: 30rpx;
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}

.cu-tag {
  height: 36rpx;
  margin: 0 15rpx;
}
page {
  background-color: #f2f2f2;
}

.detail {
  display: flex;
  .detail-img {
    width: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}

.detail-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-left: 40rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #cccccc;
  .left {
    flex: 3;
    margin-right: 20rpx;
    font-size: 34rpx;
  }
  .right {
    flex: 5;
  }
}
.service {
  padding: 20rpx;
  display: flex;
  .left {
    flex: 1;
    margin-right: 20rpx;
    text-align: center;
  }
  .right {
    flex: 3;
  }
}
.goods {
  display: flex;
}
.goods {
  .left {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    padding: 0 20rpx;
    background-color: #f2f2f2;
    margin: 0 30rpx;
    border-radius: 15rpx;
  }
  .right {
    width: 70rpx;
    height: 30rpx;
    border-radius: 15rpx;
    line-height: 30rpx;
    padding: 0 20rpx;
    text-align: center;
    background-color: #f2f2f2;
    margin-right: 12rpx;
  }
}
.assist {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .inner{
  }
  .right {
    flex: 1;
  }
  .inner-right{
		flex: 1;
		display: flex;
		align-items: center;
	}
}
.trun-position {
  margin: 30rpx 0;
  display: flex;
  align-items: center;
  .right {
    flex: 1;
    text-align: left;
  }
}
.dengji {
  font-size: 34rpx;
  margin-bottom: 12rpx;
}
.notes_outer {
  display: flex;
  align-items: center;
  .left {
    margin-right: 30rpx;
  }
  .notes {
    border: 2rpx solid #aaaaaa;
    height: 70rpx;
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    input {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10rpx;
      line-height: 70rpx;
    }
  }
}
.textarea-inner{
	border: 1rpx solid #AAAAAA;
	padding: 20rpx;
	border-radius: 10rpx;
}

</style>
